<template>
  <div class="app-container">
    <!-- <el-space :fill="true" wrap> -->
    <el-card>
      <template #header>
        <div class="flex-between">
          <span>担保形式占比</span>
          <div>
            <el-space wrap>
              <el-button class="button">导出数据</el-button>
              <el-radio-group v-model="dateType">
                <el-radio-button label="1">昨天</el-radio-button>
                <el-radio-button label="2">最近7天</el-radio-button>
                <el-radio-button label="3">最近30天</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-if="dateType == 3"
                v-model="date"
                type="daterange"
              />
            </el-space>
          </div>
        </div>
      </template>
      <div id="typeChart" :style="{ width: '100%', height: '300px' }"></div>
      <el-table v-loading="loading" :data="typeList">
        <el-table-column label="担保形式" align="center" prop="typeName" />
        <el-table-column label="担保数量" align="center" prop="count" />
        <el-table-column label="数量比例" align="center" prop="countRate" />
        <el-table-column label="担保金额" align="center" prop="money" />
        <el-table-column label="金额比例" align="center" prop="moneyRate" />
      </el-table>
    </el-card>
    <el-card style="margin-top: 8px;">
      <template #header>
        <div class="flex-between">
          <span>产品借贷情况</span>
          <div>
            <el-space wrap>
              <el-button class="button">导出数据</el-button>
              <el-radio-group v-model="dateType">
                <el-radio-button label="1">昨天</el-radio-button>
                <el-radio-button label="2">最近7天</el-radio-button>
                <el-radio-button label="3">最近30天</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-if="dateType == 3"
                v-model="date"
                type="daterange"
              />
            </el-space>
          </div>
        </div>
      </template>
      <el-table v-loading="loading" :data="analyseList">
        <el-table-column label="产品名称" align="center" prop="name" />
        <el-table-column label="浏览量" align="center" prop="visit" />
        <el-table-column label="浏览人数" align="center" prop="visitUser" />
        <el-table-column label="申请担保人数" align="center" prop="applyUser" />
        <el-table-column label="担保转化率" align="center" prop="applyRate" />
        <el-table-column label="成交担保笔数" align="center" prop="dealCount" />
        <el-table-column label="成交担保金额" align="center" prop="dealMoney" />
      </el-table>
      <pagination
        :total="100"
        v-model:page="analysePagination.page_countber"
        v-model:limit="analysePagination.page_size"
      />
    </el-card>
    <!-- </el-space> -->
  </div>
</template>

<script setup name="Analyse">
import * as echarts from "echarts";

const dateType = ref("1");
const date = ref([]);
const loading = ref(false);
const typeList = ref([
  {
    typeName: "个人信用",
    count: "100",
    countRate: "20%",
    money: " ￥10000.00",
    moneyRate: " 20%",
  },
  {
    typeName: "个人抵押",
    count: "100",
    countRate: "20%",
    money: " ￥10000.00",
    moneyRate: " 20%",
  },
  {
    typeName: "个人分期",
    count: "100",
    countRate: "20%",
    money: " ￥10000.00",
    moneyRate: " 20%",
  },
  {
    typeName: "企业信用",
    count: "100",
    countRate: "20%",
    money: " ￥10000.00",
    moneyRate: " 20%",
  },
  {
    typeName: "企业租赁",
    count: "100",
    countRate: "20%",
    money: " ￥10000.00",
    moneyRate: " 20%",
  },
]);
const analysePagination = ref({
  page_size: 1,
  page_countber: 10,
});
const analyseList = ref([
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
  {
    name: "产品A",
    visit: "1000",
    visitUser: "1000",
    applyUser: "100",
    applyRate: "10%",
    dealCount: "100",
    dealMoney: "￥10000.00",
  },
]);
let echart = echarts;
onMounted(() => {
  let typeChart = echart.init(document.getElementById("typeChart"));
  // 担保形式占比
  typeChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      top: "center",
      right: "15%",
    },
    series: [
      {
        type: "pie",
        left: "10%",
        radius: ["40%", "70%"],
        center: ["30%", "50%"],
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        data: [
          { value: 1048, name: "个人信用" },
          { value: 735, name: "个人抵押" },
          { value: 735, name: "个人分期" },
          { value: 735, name: "企业信用" },
          { value: 735, name: "企业抵押" },
          { value: 735, name: "企业租赁" },
        ],
      },
    ],
  });
});
</script>
<style scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.table-border,
.table-border tr th,
.table-border tr td {
  border: 1px solid #ccc;
}
.table-border {
  box-sizing: border-box;
  width: 100%;
  line-height: 32px;
  border-collapse: collapse;
  text-align: center;
  margin-top: 96px;
}
.table-border .table-title {
  font-weight: bold;
  background: #f9fafc;
}
</style>
